<template>
  <div>
    首页1
    <UButton @click="() => execute()"> 点击在客户端再次请求接口(封装的useFetch组合式的请求) </UButton>
    <UButton @click="click"> 点击在客户端请求接口(封装的$fetch返回Promise的请求) </UButton>
    <div v-if="pending">pending......</div>
    <div v-else>res1: {{ res1 }}</div>
    <div
      class="test"
      @click="clickTest"
    >
      <img
        v-for="item in res1?.Result"
        :key="item.BannerUrl"
        :src="item.BannerUrl"
      />
    </div>
    <!-- 虚拟滚动 -->
    <UButton @click="changeData"> 修改虚拟列表数据 </UButton>
    <div>list虚拟列表:</div>
    <MyInfiniteVirtualScroll
      :container-height="300"
      :grid-gap="8"
      :item-height="itemHeight"
      :items="allItems"
    >
      <template #default="option">
        <div :style="{ border: '1px solid #fff', height: '100%' }">
          {{ option.data.name }}
        </div>
      </template>
    </MyInfiniteVirtualScroll>
    <div>Grid虚拟列表:</div>
    <MyInfiniteVirtualScroll
      :container-height="300"
      :grid-gap="[8, 32]"
      :grid-size="3"
      :item-height="itemHeight"
      :items="allItems"
    >
      <template #default="option">
        <div :style="{ flex: 1, border: '1px solid #fff', height: '100%' }">
          {{ option.data.name }}
        </div>
      </template>
    </MyInfiniteVirtualScroll>
  </div>
</template>

<script setup lang="ts">
interface ResponseType {
  Result: {
    BannerUrl: string
  }[]
  StatusCode: number
  Message: string
  BusinessCode: number
}

const params = { BannerInfoQueryParams: { BannerInfoGroupType: 'homePageTool', ClientType: 0 } }

// 服务器请求接口并渲染
const {
  data: res1,
  execute,
  pending
} = await useMyRequest<ResponseType>('/app/banner/getbannerinfolist', {
  baseURL: 'https://api.aiiiin.com', // 覆盖useMyRequest中配置的baseURL
  method: 'POST',
  body: params
  // server: false // 如果设置为false将不在服务端请求接口并渲染
  // 尝试打开 lazy和immediate注释，并打开execute()注释
  // lazy: true,
  // immediate: false
})
// 如果使用下面方式会在服务端和客户端重复请求，切勿使用
// const res1 = await $useMyRequest<ResponseType>('/app/banner/getbannerinfolist', {
//   baseURL: 'https://api.aiiiin.com',
//   method: 'POST',
//   body: params
// })

console.log('from SSR:', import.meta.server, import.meta.server ? '在服务端打印' : '在客户端打印', Date.now())

const click = async () => {
  // execute()
  getbannerinfolist()
}

const clickTest = async (event: MouseEvent) => {
  if (event.target instanceof HTMLElement) {
    console.log('event', event.target, event.target.className)
  }
}

async function getbannerinfolist() {
  // 客户端请求接口并渲染
  const res = await $useMyRequest<ResponseType>('/app/banner/getbannerinfolist', {
    baseURL: 'https://api.aiiiin.com', // 覆盖useMyRequest中配置的baseURL
    method: 'POST',
    body: params
  })
  console.log(1111, res)
  res1.value = res
}

interface MyItem {
  id: number
  name: string
}

const datas = []
for (let index = 0; index < 999; index++) {
  datas.push({
    id: index,
    name: `name-${index}`
  })
}

const allItems = ref<MyItem[]>(datas)

const itemHeight = ref(60)

const changeData = () => {
  const datas = []
  for (let index = 0; index < 100; index++) {
    datas.push({
      id: index,
      name: `name-${index}`
    })
  }
  allItems.value = datas
}
</script>
